{% extends "base/base.html" %}

{% block title %}用户登录 - 旅游舆情监测{% endblock %}

{% block content %}
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .login-page {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1e88e5, #0d47a1);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-form {
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            width: 90%;
            max-width: 450px;
            animation: fadeInUp 0.6s ease;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-title {
            text-align: center;
            color: #1e88e5;
            margin-bottom: 30px;
            font-weight: bold;
            font-size: 28px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 12px 15px;
            font-size: 14px;
            transition: all 0.3s ease;
            width: 100%;
            box-sizing: border-box;
        }

        .form-control:focus {
            border-color: #1e88e5;
            box-shadow: 0 0 0 0.2rem rgba(30, 136, 229, 0.25);
            outline: none;
        }

        .form-label {
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            display: block;
        }

        .btn-login {
            background: linear-gradient(135deg, #1e88e5, #0d47a1);
            border: none;
            padding: 12px;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
            border-radius: 8px;
            color: white;
            width: 100%;
            cursor: pointer;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(30, 136, 229, 0.4);
        }

        .register-link {
            border: 2px solid #1e88e5;
            color: #1e88e5;
            text-decoration: none;
            transition: all 0.3s ease;
            border-radius: 8px;
            font-weight: 600;
            padding: 12px;
            display: block;
            text-align: center;
            background: white;
        }

        .register-link:hover {
            background: #1e88e5;
            color: white;
            text-decoration: none;
            transform: translateY(-1px);
        }

        .forgot-password {
            text-align: center;
            margin: 15px 0;
        }

        .forgot-password a {
            color: #666;
            text-decoration: none;
            font-size: 14px;
        }

        .forgot-password a:hover {
            color: #1e88e5;
            text-decoration: underline;
        }

        .system-info {
            text-align: center;
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #1e88e5;
        }

        .system-info h6 {
            color: #1e88e5;
            margin-bottom: 5px;
        }

        .system-info p {
            color: #666;
            font-size: 12px;
            margin: 0;
        }

        /* 验证码样式 */
        .captcha-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .captcha-image {
            border: 1px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .captcha-image:hover {
            opacity: 0.8;
            transform: scale(1.05);
        }

        .captcha-refresh {
            color: #1e88e5;
            cursor: pointer;
            font-size: 14px;
        }

        .captcha-refresh:hover {
            text-decoration: underline;
        }

        .error-message {
            color: #dc3545;
            font-size: 14px;
            margin-top: 5px;
        }

        .form-check {
            margin-bottom: 20px;
        }

        .form-check-input {
            margin-right: 8px;
        }

        .alert {
            padding: 12px 15px;
            border-radius: 6px;
            margin-bottom: 20px;
        }

        .alert-danger {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }

        .alert-success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }

        .alert-info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
    </style>

    <div class="login-page">
        <div class="login-form">
            <h2 class="form-title">
                <i class="fa fa-sign-in"></i> 用户登录
            </h2>

            <!-- 系统信息 -->
            <div class="system-info">
                <h6><i class="fa fa-map-marker"></i> 旅游舆情监测系统</h6>
                <p>实时监测景点舆情，分析用户情感倾向</p>
            </div>

            <form method="post">
                {% csrf_token %}

                <!-- 用户名字段 -->
                <div class="form-group">
                    <label for="{{ form.username.id_for_label }}" class="form-label">
                        <i class="fa fa-user"></i> 用户名
                    </label>
                    <input type="text"
                           name="{{ form.username.name }}"
                           id="{{ form.username.id_for_label }}"
                           class="form-control"
                           placeholder="请输入用户名"
                           value="{{ form.username.value|default:'' }}">
                    {% if form.username.errors %}
                        <div class="error-message">
                            {% for error in form.username.errors %}
                                <i class="fa fa-exclamation-circle"></i> {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- 密码字段 -->
                <div class="form-group">
                    <label for="{{ form.password.id_for_label }}" class="form-label">
                        <i class="fa fa-lock"></i> 密码
                    </label>
                    <input type="password"
                           name="{{ form.password.name }}"
                           id="{{ form.password.id_for_label }}"
                           class="form-control"
                           placeholder="请输入密码">
                    {% if form.password.errors %}
                        <div class="error-message">
                            {% for error in form.password.errors %}
                                <i class="fa fa-exclamation-circle"></i> {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- 验证码字段 -->
                <div class="form-group">
                    <label class="form-label">
                        <i class="fa fa-shield"></i> 验证码
                    </label>
                    <div class="captcha-group">
                        {{ form.captcha }}
                        <span class="captcha-refresh" onclick="refreshCaptcha()">
                            <i class="fa fa-refresh"></i> 换一张
                        </span>
                    </div>
                    {% if form.captcha.errors %}
                        <div class="error-message">
                            {% for error in form.captcha.errors %}
                                <i class="fa fa-exclamation-circle"></i> {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- 记住我选项 -->
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="rememberMe" name="remember_me">
                    <label class="form-check-label" for="rememberMe">
                        <i class="fa fa-check-circle"></i> 记住登录状态
                    </label>
                </div>

                <!-- 显示非字段错误 -->
                {% if form.non_field_errors %}
                    <div class="alert alert-danger">
                        <i class="fa fa-exclamation-triangle"></i>
                        {% for error in form.non_field_errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% endif %}

                <!-- 显示消息 -->
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }}">
                            <i class="fa fa-info-circle"></i> {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}

                <button type="submit" class="btn-login">
                    <i class="fa fa-sign-in"></i> 立即登录
                </button>

                <!-- 忘记密码 -->
                <div class="forgot-password">
                    <a href="#"><i class="fa fa-question-circle"></i> 忘记密码？</a>
                </div>

                <a href="{% url 'users:reg' %}" class="register-link">
                    <i class="fa fa-user-plus"></i> 没有账号？立即注册
                </a>
            </form>
        </div>
    </div>
{% endblock %}

{% block js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function refreshCaptcha() {
    $.get("/captcha/refresh/", function(result) {
        $('.captcha').attr('src', result.image_url);
        $('#id_captcha_0').val(result.key);
    });
}

$(document).ready(function(){
    // 点击验证码刷新
    $('.captcha').click(function(){
        refreshCaptcha();
    });

    // 表单提交动画
    $('form').submit(function(e) {
        var submitBtn = $('.btn-login');
        submitBtn.html('<i class="fa fa-spinner fa-spin"></i> 登录中...');
        submitBtn.prop('disabled', true);

        // 允许表单正常提交
        return true;
    });

    // 回车键提交表单
    $(document).keypress(function(e) {
        if (e.which == 13) {
            $('form').submit();
        }
    });
});
</script>
{% endblock %}